<!--
 * @Descripttion: 触发对账
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-14 09:57:50
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-26 17:45:57
-->
<template>
  <el-card class="box-card">
    <!-- 搜索区域 START -->
    <e-search ref="searchFormRef"
              :form-options="formOptions"
              :form-label-width="searchLabelWidth"
              :refresh-show="true"
              @on-search="searchControlHandle"
              @on-refresh="refreshControlHandle"
              @change-height="changeControlHeight" />
    <!-- 搜索区域 END -->
    <!-- 功能按钮区 START -->
    <!--<el-row type="flex" justify="end">-->
      <!--<el-button @click="handleNoReconciliation()" type="primary" size="small">不参与对账</el-button>-->
    <!--</el-row>-->
    <!-- 功能按钮区 END -->
    <!-- 已对账表格 -->
    <div class="table-title">已对账</div>
    <!-- table 数据表格 START -->
    <e-table :data="reconList"
             :columns="columns_no_option"
             stripe
             border
             :max-height="tableMaxHeight"
             style="width: 100%"
             @selection-change="changeReconListSelectData"
             :current="pageList[0].pageData.pageNum"
             :total="pageList[0].pageData.total"
             @page-size-change="changePageSize($event,0)"
             @page-current-change="changePageCurrent($event,0)">
    </e-table>
    <!-- table 数据表格 END -->
    <template v-if="type !== 'local'">
      <div class="table-title">未对账 电商供应商</div>
      <!--电商未对账表格-->
      <e-table :data="emallList"
              :columns="columns"
              stripe
              border
              :max-height="tableMaxHeight"
              style="width: 100%"
              @selection-change="changeEmallListSelectData"
               :current="pageList[1].pageData.pageNum"
               :total="pageList[1].pageData.total"
               @page-size-change="changePageSize($event,1)"
               @page-current-change="changePageCurrent($event,1)">
        <template slot-scope="{scope}"
                  slot="operation">
          <el-button @click="handleNoReconciliation(scope.row)"
                    type="warning"
                    size="mini"
                    plain>不参与对账</el-button>
        </template>
      </e-table>
    </template>
    <!--电商未对账表格-->
    <template v-if="type !== 'eshop'">
      <div class="table-title">未对账 本地供应商(手动导入)</div>
      <e-table :data="localList"
              :columns="columns"
              stripe
              border
              :max-height="tableMaxHeight"
              style="width: 100%"
              @selection-change="changeLocalListSelectData"
               :current="pageList[2].pageData.pageNum"
               :total="pageList[2].pageData.total"
               @page-size-change="changePageSize($event,2)"
               @page-current-change="changePageCurrent($event,2)">
        <template slot-scope="{scope}"
                  slot="operation">
          <el-button @click="handleNoReconciliation(scope.row)"
                    type="warning"
                    size="mini"
                    plain>不参与对账</el-button>
        </template>
      </e-table>
    </template>
    <!--电商未对账表格-->
    <div class="table-title">未对账 中心</div>
    <e-table :data="centerList"
             :columns="columns"
             stripe
             border
             :max-height="tableMaxHeight"
             style="width: 100%"
             @selection-change="changeCenterListSelectData"
             :current="pageList[3].pageData.pageNum"
             :total="pageList[3].pageData.total"
             @page-size-change="changePageSize($event,3)"
             @page-current-change="changePageCurrent($event,3)">
      <template slot-scope="{scope}"
                slot="operation">
        <el-button @click="handleNoReconciliation(scope.row)"
                   type="warning"
                   size="mini"
                   plain>不参与对账</el-button>
      </template>
    </e-table>
    <!-- editDialog 编辑弹窗 START -->
    <el-dialog title="不参与对账原因"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="50%">
      <e-form ref="dialogForm"
              :form-options="editFormOptions"
              :form-label-width="editFormLabelWidth"
              :form-rules="editFormRules"
              :form-data-current="dialogFormCurrent"></e-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancelDialogDataHandle">取 消</el-button>
        <el-button type="primary"
                   @click="saveDialogDataHandle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- editDialog 编辑弹窗 END -->
  </el-card>
</template>

<script>
import eControl from "@/components/e-control";
import eSearch from '@/components/e-search'
import eForm from '@/components/e-form'
import { formOptions, btns } from './control'
import { columns, columns_no_option } from './columns'
import { editFormOptions, editFormRules } from './form'
import { queryRecordList, querySuppliers, signNoCheckTriggerRecord, checkList } from '@/api/admin.api'
export default {
  name: 'trigger-record',
  components: {
    eControl,
    eSearch,
    eForm
  },
  props: {},
  data () {
    return {
      formOptions,
      btns,
      columns,
      columns_no_option,
      editFormOptions,
      editFormRules,
      searchLabelWidth: '100px',
      editFormLabelWidth: '100px',

      // 编辑框是否展示
      editDialogShow: false,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,

      // 分页数据
      pageList: [
        {
          pageData: {
          // 当前分页
          pageNum: 1,
          // 分页条数
          pageSize: 10,
          // 数据总数
          total: 0
          }
        },
        {
          pageData: {
            // 当前分页
            pageNum: 1,
            // 分页条数
            pageSize: 10,
            // 数据总数
            total: 0
          }
        },
        {
          pageData: {
            // 当前分页
            pageNum: 1,
            // 分页条数
            pageSize: 10,
            // 数据总数
            total: 0
          }
        },
        {
          pageData: {
            // 当前分页
            pageNum: 1,
            // 分页条数
            pageSize: 10,
            // 数据总数
            total: 0
          }
        }
      ],
      // 表格选中数据
      reconSelectList: [],
      // 电商未对账表格选中数据
      emallSelectList: [],
      // 本地供应商未对账表格选中数据
      localSelectList: [],
      // 中心未对账表格选中数据
      centerSelectList: [],

      // 已对账表格数据
      reconList: [],
      // 电商未对账表格数据
      emallList: [],
      // 本地供应商未对账表格数据
      localList: [],
      // 中心未对账表格数据
      centerList: [],
      noCheckReason: '',
      currentPage: 1,
      pageSize: 6,
      totalPage: 0,
      currentRow: null,
      // local 本地供应商 eshop 电商
      type: ''
    }
  },
  watch: {},
  computed: {
    // 组合查询条件和分页
    // searchData () {
      // const { pageNum, pageSize } = this.pageData
      // return { ...this.searchFormData, size: pageSize, current: pageNum }
      // return Object.assign(this.searchFormData,{size: pageSize},{current:pageNum})
    // },
    // 表单实例
    dialogForm () {
      return this.$refs.dialogForm
    },
    //表格最大高度
    tableMaxHeight () {
      return 400
    }
  },
  created () {
    this.type = this.$route.query.typea
  },
  mounted() {
    this.$nextTick(()=>{
      this.init()
    })
  },
  methods: {
    /**
     * @functionName init
     * @description 页面初始化
     * @author 张航
     * @date 2020-09-09 08:40:06
     * @version V1.0.0
     */
    init () {
      this.getTableData()
      this.getLabelData()
    },
    // 获取菜单弹出项
    getLabelData () {
      // 获取电商筛选类型
      querySuppliers().then(res => {
        // console.log(res)
        res.map((item, index) => {
          const optionObj = {}
          optionObj.value = item.id
          optionObj.label = item.orgNameZhShort
          this.$set(this.formOptions[0].options, index, optionObj)
        })
      })
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight (height) {
      this.controlHeight = height
    },
    /**
     * @functionName changeReconListSelectData
     * @param {Array} rows 选中数据
     * @description 表格选中数据改变
     * @author 张航
     * @date 2020-09-08 17:52:12
     * @version V1.0.0
     */
    changeReconListSelectData (rows) {
      this.reconSelectList = rows
    },
    changeEmallListSelectData (rows) {
      this.emallSelectList = rows
    },
    changeLocalListSelectData (rows) {
      this.localSelectList = rows
    },
    changeCenterListSelectData (rows) {
      this.centerSelectList = rows
    },
    /**
     * @functionName checkTableSelectData
     * @return {Number} 返回结果
     * @description 方法描述
     * @author 张航
     * @date 2020-09-10 09:58:59
     * @version V1.0.0
     */
    checkTableSelectData () {
      if (this.emallSelectList.length === 0 &&
        this.localSelectList.length === 0 &&
        this.centerSelectList.length === 0) {
        this.$alert('至少选择一条数据！', '提示', {
          confirmButtonText: '确定'
        })
      }
      return true
    },
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize (size,index) {
      this.pageList[index].pageData.pageSize = size
      this.getTableData()
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent (current,index) {
      this.pageList[index].pageData.pageNum = current
      this.getTableData()
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.getTableData()
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    async getTableData () {
      const self = this
      const queryTypes = ['','eshop','local','center']
      for (let i = 0, max = queryTypes.length; i < max; i++) {
        await checkList({
          ...self.searchFormData,
          size: self.pageList[i].pageData.pageSize,
          current:self.pageList[i].pageData.pageNum,
          queryType: queryTypes[i]
        }).then(res => {
          self.pageList[i].pageData.total = res.total
          switch (i) {
            case 0:
              self.reconList = res.records
              break
            case 1:
              self.emallList = res.records
              break
            case 2:
              self.localList = res.records
              break
            case 3:
              self.centerList = res.records
              break
            default:
              break
          }
        })
      }
      /*// 对账成功
      checkList({
        ...this.searchData,
        queryType: ''
      }).then(res => {
        this.reconList = res.records
        this.pageData.total = res.total
      })
      // 电商未对账
      checkList({
        ...this.searchData,
        queryType: 'eshop'
      }).then(res => {
        this.emallList = res.records
      })
      // 本地供应商未对账
      checkList({
        ...this.searchData,
        queryType: 'local'
      }).then(res => {
        this.localList = res.records
      })
      // 中心未对账
      checkList({
        ...this.searchData,
        queryType: 'center'
      }).then(res => {
        this.centerList = res.records
      })*/
    },
    /**
     * @functionName openDialog
     * @description 打开编辑框
     * @author 张航
     * @date 2020-09-08 11:38:51
     * @version V1.0.0
     */
    openDialog () {
      this.editDialogShow = true
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    closeDialog () {
      this.editDialogShow = false
    },
    /**
     * @functionName saveDialogData
     * @description 保存弹框数据
     * @author 张文韬
     * @date 2020-10-25 14:12:09
     * @version V1.0.0
     */
    saveDialogDataHandle () {
      const dataForm = this.dialogForm.formData
      console.log(dataForm)
      if (dataForm.reconciliationRemark.length > 0) {
        let ids = []
        // this.localSelectList.map((item) => {
        //   ids.push({
        //     type: 'local',
        //     id: item.supplierOrderNo
        //   })
        // })
        // this.emallSelectList.map((item) => {
        //   ids.push({
        //     type: 'eshop',
        //     id: item.supplierOrderNo
        //   })
        // })
        // this.centerSelectList.map((item) => {
        //   ids.push({
        //     type: 'center',
        //     id: item.supplierOrderNo
        //   })
        // })
        signNoCheckTriggerRecord({
          noCheckDtoList: [ {
            type: dataForm.type,
            orderId: dataForm.supplierOrderNo
          }],
          reason: dataForm.reconciliationRemark,
        }).then(res => {
          this.closeDialog()
          this.getTableData()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        })
      }
    },
    /**
     * @functionName cancelDialogData
     * @description 取消保存弹框数据
     * @author 张文韬
     * @date 2020-10-25 14:33:06
     * @version V1.0.0
     */
    cancelDialogDataHandle () {
      this.noCheckReason = ''
      this.closeDialog()
    },
    // 处理不参与对账
    handleNoReconciliation (row) {
      this.dialogFormCurrent = row
      // if (this.checkTableSelectData()) {
        this.openDialog()
      // }
    }
  }
}
</script>
<style lang="scss">
.box-card {
  margin: 4px;
  height: calc(100vh - 110px);
  overflow: scroll;
  .el-card__body {
    padding: 0;
  }
}
.abc {
  font-weight: bold;
  color: #e53939;
}
.el-pagination {
  padding: 20px;
  text-align: right;
}
.table-title{
  font-size: 20px;
  padding: 10px;
  font-weight: bolder;
}
</style>
